<template>
	<div class="theme-picker-container">
		<div
			v-for="theme in themeConfig" :key="theme.key"
			class="theme-picker-item"
			:style="{background: theme.key === value ? '#EAF1FF' : ''}"
			@click="selectTheme(theme)">
			<div class="theme-picker-img">
				<img :src="theme.img" alt="" width="100%" height="100%">
			</div>
			<div class="flex-justify-center pad-top-btm-5">
				<i :class="themeClass(theme)" class="iconfont"></i>
				<span class="font-weight-bold mar-lft-5">{{theme.label}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import {themeConfig} from "@/config/common";

	export default {
		name: "ThemePicker",
		model: {
			event: 'change'
		},
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				themeConfig: themeConfig,
				selectedTheme: 'theme1'
			};
		},
		computed: {
			themeClass() {
				return (theme) => {
					return theme.key === this.value
						? 'icon-qiyong font-size-22 font-color-primary'
						: 'icon-noselected font-size-16'
				}
			}
		},
		methods: {
			selectTheme(theme) {
				this.$emit('change', theme.key);
			}
		},
	}
</script>

<style scoped lang="less">
	.theme-picker-container {
		display: flex;
		align-items: center;
		gap: 15px;

		.theme-picker-item {
			width: 160px;
			border: 1px solid #EAF1FF;
			border-radius: 8px;
			cursor: pointer;

			.theme-picker-img {
				width: 100%;
				height: 110px;

				img {
					border-radius: 8px 8px 0 0;
				}
			}
		}

		div {
			line-height: 24px;
		}
	}
</style>